<template>
	<div>
		<el-button style="float: left; margin: 5px" type="primary" size="mini" @click="onAdd()" plain>新增</el-button>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column fixed prop="name" label="角色名称" width="240" />
			<el-table-column label="创建时间" width="180">
				<template #default="scope">{{ dateFormat(scope.row.createTime) }}</template>
			</el-table-column>
			<el-table-column prop="creator" label="创建人" width="180" />
			<el-table-column prop="remark" label="备注" />
			<el-table-column fixed="right" label="操作" width="240">
				<template #default="scope">
					<el-button type="primary" size="mini" @click="onEdit(scope.row.id)">编辑</el-button>
					<el-button type="danger" size="mini" @click="onDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:page-sizes="[10, 20, 50, 100]"
			:page-size="pager.size"
			layout="total, sizes, prev, pager, next, jumper"
			:total="pager.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
		</el-pagination>
		<el-drawer v-model="drawer" title="角色编辑" direction="rtl" :size="420" :before-close="handleClose">
			<el-form :model="form" label-width="80px" size="mini">
				<el-form-item label="角色名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.remark" type="textarea"></el-input>
				</el-form-item>
				<el-form-item label="角色权限">
					<el-tree :data="dataTree" show-checkbox ref="tree" node-key="id" :default-checked-keys="form.checks" default-expand-all highlight-current />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit()">保存</el-button>
					<el-button @click="drawer = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { queryRoles, queryRole, postRole, delRole, getMealsTree } from '/@/api/role/index';
import moment from 'moment';
export default defineComponent({
	components: {},
	setup() {
		const form = reactive({
			id: 0,
			name: '',
			remark: '',
			checks: [],
			menuIds: [],
		});
		const state = reactive({
			drawer: false,
			pager: {
				size: 10,
				total: 0,
			},
			dataTree: [],
			tableData: [],
		});
		(async function () {
			await initRoles();
		})();
		async function initRoles() {
			await queryRoles({ PageSize: 1000 }).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.pager.total = res.data.totalCount;
				}
			});
		}
		const dateFormat = computed(() => (date: any) => {
			return moment(date).format('YYYY-MM-DD HH:mm:ss');
		});
		async function onAdd() {
			state.drawer = true;
			form.name = '';
			form.id = 0;
			form.remark = '';
			form.checks = [];
			form.menuIds = [];
			await getMealsTree().then((res: any) => {
				if (res.success) {
					state.dataTree = res.data.list;
				}
			});
		}
		const handleClose = (done: () => void) => {
			ElMessageBox.confirm('是否关闭?')
				.then(() => {
					state.drawer = false;
					done();
				})
				.catch(() => {});
		};
		async function onEdit(id = 0) {
			state.drawer = true;
			state.dataTree = [];
			form.checks = [];
			form.id = id;
			await queryRole(id).then((res: any) => {
				if (res.success) {
					form.name = res.data.name;
					form.remark = res.data.remark;
					form.checks = res.data.roleMapMenuResult.checks;
					state.dataTree = res.data.roleMapMenuResult.list;
				}
			});
		}
		async function onDelete(id) {
			await ElMessageBox.confirm('是否刪除?')
				.then(() => {
					delRole({
						ids: [id],
					}).then((res: any) => {
						if (res.success) {
							initRoles();
							ElMessage({ message: '操作成功', type: 'success' });
						}
					});
				})
				.catch(() => {});
		}
		async function onSubmit() {
			form.menuIds = this.$refs.tree.getCheckedNodes(false,true).map(function(a){ return a.id;});
			console.log(form.menuIds);
			await postRole(form).then((res: any) => {
				if (res.success) {
					state.drawer = false;
					initRoles();
					ElMessage({ message: '操作成功', type: 'success' });
				}
			});
		}
		async function handleSizeChange() {}
		async function handleCurrentChange() {}
		return {
			state,
			dateFormat,
			handleClose,
			onDelete,
			onEdit,
			form,
			onAdd,
			onSubmit,
			handleSizeChange,
			handleCurrentChange,
			...toRefs(state),
		};
	},
});
</script>
